<template>
	<view class="container">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;background-color: #E0654C;"></view>
		<view class="content">
			<view class="top">
				<image src="https://zhzx.on-line-demo.com/image/top-bg.png" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="info">
					<view class="basic">
						<view class="img-container">
							<image :src="data.avatar" mode="aspectFill"
								style="width: 100%;height: 100%;"></image>
						</view>
						<view class="text">
							<view class="name">
								{{data.nickname}}
							</view>
							<view class="unit" v-if="data.unit_name && data.uni_name != null">
								{{data.unit_name}}
							</view>
							<view class="unit" v-if="data.rank && data.rank != null">
								{{data.rank}}
							</view>
						</view>
					</view>
						<view class="btn" style="margin-right: 10px;" @click="showContent(`/pages/my/editInfo?id=${data.id}`)">编辑资料</view>
						<view class="btn" @click="showContent(`/pages/my/score?id=${data.id}`)">履职得分</view>
				</view>
			</view>
			<view class="notice">
				<uni-list>
					<view @click="toPage()">
					<!-- <uni-list-item direction="row" to="/pages/my/resumption"> -->
					<uni-list-item direction="row" >
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/wdlz.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">我的履职</view>
								<view class="tip">履职工作一览</view>
							</view>
						</template>
					</uni-list-item>
					</view>
					<uni-list-item direction="row" to="/pages/my/comment">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/wdpl.png" mode="widthFix" style="width: 22px;height: 22px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">我的评论</view>
								<view class="tip">我评论过的内容</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item direction="row" to="/pages/my/collect">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/wdsc.png" mode="widthFix" style="width: 24px;height: 24px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">我的收藏</view>
								<view class="tip">我收藏的内容</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item direction="row" to="/pages/my/feedback">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/yjfk.png" mode="widthFix" style="width: 24px;height: 24px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">意见反馈</view>
								<view class="tip">对本平台提出的一些建议</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item direction="row" to="/pages/my/illustrate">
						<template v-slot:header>
							<view class="uni-icon">
								<image src="https://zhzx.on-line-demo.com/image/sysm.png" mode="widthFix" style="width: 18px;height: 18px;"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="name">使用说明</view>
								<view class="tip">本系统的操作说明</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="login_out" @click="loginOut">
				退出登录
			</view>
		</view>
		<!-- <Footer :idx="4"></Footer> -->
	</view>
</template>

<script>
	import Footer from '../../components/footer.vue'
	import request from '../../common/request.js'
	export default {
		components: {
			Footer
		},
		data() {
			return {
				data:{}
			}
		},
		onLoad() {

		},
		mounted() {
			this.getUserInfo()
			uni.$on('updateUser', () => {
				this.getUserInfo()
			})
		},
		methods: {
			toPage(){
				// 切换到履职页
				uni.$emit('toPage', 2)
			},
			showContent(url){
				uni.navigateTo({
					url: url
				})
			},
			getUserInfo(){
				request({
					url:'/user/userInfo',
					method:'POST',
				}).then(res => {
						if(res.code == 1){
							this.data = res.data
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
			},
			loginOut(){
				request({
					url:'/user/logout',
					method:'POST',
				}).then(res => {
						if(res.code == 1){
							uni.redirectTo({
								url: '/pages/login'
							});
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar{
		position: sticky;
		top: 0;
		z-index:999;
		background-color: #fff;
	}
	.container {
		background-color: #f4f4f4;
		min-height: 100%;
		border: 1px solid transparent;
	}

	.content {
		.top {
			height: 500rpx;
			color: #f2f2f2;
			font-size: 14px;
			position: relative;
			box-sizing: border-box;

			.info {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: calc(100% - 30px);
				margin: 0px 15px;
				z-index: 2;
				.basic{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;
				}
				.img-container {
					width: 70px;
					height: 70px;
					border: 2px solid #fff;
					border-radius: 50%;
					overflow: hidden;
				}
				.text{
					width: calc(100% - 90px)
				}
				.name {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 5px;
				}
			}

			.btn{
				background-color: rgba(242, 242, 242, 0.25);
				padding: 8px 10px;
				border-radius: 2px;
				display: inline-block;
			}
		}


		.notice {
			background-color: #fff;
			margin: -80rpx 15px 10px;
			border-radius: 15px;
			overflow: hidden;

			::v-deep .uni-list-item__container {
				align-items: center;
			}
			.uni-content{
				justify-content: center;
			}
			.uni-icon {
				width: 46px;
				height: 46px;
				border: 1px solid #d2d2d4;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 5px 20px 5px 10px;
			}

			.name {
				font-weight: bold;
				font-size: 16px;
				margin-bottom: 3px;
			}

			.tip {
				font-size: 14px;
				color: #909090;
			}
		}

		.login_out {
			background-color: #ea5c55;
			color: #fff;
			text-align: center;
			margin: 20px 15px 30px;
			line-height: 45px;
			border-radius: 10px;
			font-size: 14px;
		}
	}
</style>